{% extends "base.html" %}
  {% block content %}
  <div id="page-wrapper">
     <div class="row">
         <div class="col-lg-12">
             <h2 class="page-header">Manage Privilege</h2>
         </div>
         <!-- /.col-lg-12 -->
     </div>
     <!-- /.row -->
     <div class="row">
         <div class="col-lg-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
                     Manage Privilege
                     <!-- begin action -->
                     <div class="btn-group" style="float:right">
                       <button type="button" class="btn btn-outline btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       Action <span class="caret"></span>
                       </button>
                       <ul class="dropdown-menu">
                         <li><a id="add_privilege" href="#"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> | Add </a></li>
                         <li role="separator" class="divider"></li>
                         <li><a id="modify_privilege" href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> | Modify </a></li>
                         <li role="separator" class="divider"></li>
                         <li><a id="delete_privilege" href="#"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> | Delete </a></li>
                       </ul>
                       <!-- begin all modal  -->
                       <!-- add  modal -->
                       <div id="add_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="exampleModalLabel">Add</h4>
                             </div>
                             <div class="modal-body">
                               <form class="form-horizontal" id="add_data" method="post" action="/account/add_privilege/">
                                 <fieldset>
                                   <div class="form-group">
                                     <label for="name" class="col-sm-3 control-label">Privilege Name</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="name" name="name" minlength="1" type="text" placeholder="name" required>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="allow" class="col-sm-3 control-label">Allow</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="allow" name="allow" minlength="1" type="text" placeholder="eg. 'command1','command2','commandN'!!warning:if allow all,don't write anything">
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="deny" class="col-sm-3 control-label">Deny</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="deny" name="deny" minlength="1" type="text" placeholder="eg. 'command1','command2','commandN'!!warning:if allow all,don't write anything" >
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="informations" class="col-sm-3 control-label">informations</label>
                                     <div class="col-sm-9">
                                       <textarea class="form-control" id="informations" name="informations" minlength="1" required></textarea>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <div class="col-sm-offset-3 col-sm-9">
                                       <div class="checkbox">
                                         <label>
                                           <input checked type="checkbox" name="enabled" value="true"> Enabled or Not
                                         </label>
                                       </div>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <div class="col-sm-offset-3 col-sm-9">
                                       <button onclick="submit" id="add_commit" type="submit" class="btn btn-outline btn-success btn-xs">Submit</button>
                                     </div>
                                   </div>
                                 </fieldset>
                               </form>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end add  modal -->

                       <!-- delete  modal -->
                       <div id="delete_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="exampleModalLabel">Are You Sure?</h4>
                             </div>
                             <div class="modal-body">
                               <form id="delete_data" class="form-inline" method="POST" action="/account/del_privilege/">
                               <!-- jquery will append content here -->
                               </form>
                             </div>
                             <div class="modal-footer">
                               <button type="button" class="btn btn-outline btn-warning btn-xs" data-dismiss="modal">Close</button>
                               <button id="delete_commit" type="button" class="btn btn-outline btn-danger btn-xs" data-dismiss="modal" >Delete</button>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end delete group  -->
                       
                       <!-- modify group --> 
                       <div id="modify_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="exampleModalLabel">Modify</h4>
                             </div>
                             <div class="modal-body">

                               <form id="modify_data" class="form-horizontal" method="POST" action="/account/modify_privilege/">
                                   <div class="form-group">
                                     <label for="name" class="col-sm-3 control-label">Id</label>
                                     <div class="col-sm-9">
                                       <input readonly class="form-control" id="id" name="id" minlength="1" type="text" placeholder="id" required>
                                     </div>
                                   </div>
                                   <div class="form-group">
                                     <label for="name" class="col-sm-3 control-label">Privilege Name</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="name" name="name" minlength="1" type="text" placeholder="name" required>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="allow" class="col-sm-3 control-label">Allow</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="allow" name="allow" minlength="1" type="text" placeholder="eg. 'command1','comman    d2','commandN'!!warning:if allow all,don't write anything">
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="deny" class="col-sm-3 control-label">Deny</label>
                                     <div class="col-sm-9">
                                       <input class="form-control" id="deny" name="deny" minlength="1" type="text" placeholder="eg. 'command1','comman    d2','commandN'!!warning:if allow all,don't write anything">
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <label for="informations" class="col-sm-3 control-label">informations</label>
                                     <div class="col-sm-9">
                                       <textarea class="form-control" id="informations" name="informations" minlength="1" required></textarea>
                                     </div>
                                   </div>

                                   <div class="form-group">
                                     <div class="col-sm-offset-3 col-sm-9">
                                       <div class="checkbox">
                                         <label>
                                           <input id="enabled"  type="checkbox" name="enabled" value=""> Enabled or Not
                                         </label>
                                       </div>
                                     </div>
                                   </div>
                               </form>
                             </div>
                             <div class="modal-footer">
                               <button type="button" class="btn btn-outline btn-warning btn-xs" data-dismiss="modal">Close</button>
                               <button id="modify_commit" type="button" class="btn btn-outline btn-primary btn-xs" data-dismiss="modal" >Save</button>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end modify  -->

                       <!-- checkbox error modal -->
                       <div id="checkbox_error_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               </div>
                               <div class="modal-body">
                                 <h4 class="modal-title" id="checkbox_error">There is no item selected</h4>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       <!-- end checkbox page error -->

                       <!-- alert error modal -->
                       {% if error %}
                       <div id="error_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               </div>
                               <div class="modal-body">
                                 <h4 class="modal-title" id="error">{{ error }}</h4>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       {% endif %}
                       <!-- end alert error modal  -->
                       
                       <!-- alert success modal -->
                       {% if success %}
                       <div id="success_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                         <div class="modal-dialog modal-lg">
                           <div class="modal-content">
                             <div class="modal-content">
                               <div class="modal-header">
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               </div>
                               <div class="modal-body">
                                 <h4 id="success" class="modal-title">{{ success }}</h4>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                       {% endif %}
                       <!-- end alert success modal  -->
                     </div>
                     <!-- end action -->
                 </div>
                 <!-- /.panel-heading -->
                 <div class="panel-body">
                     <div class="dataTable_wrapper">
                         <table id="datatable-demo" class="table table-striped table-bordered table-hover">
                             <thead>
                                 <tr>
                                    <th>
                                      <input id="CHKall" type="checkbox" name="CHKall" value="CHKall"></input>
                                    </th>
                                    <th>ID</th>
                                    <th>Privilege_Name</th>
                                    <th>Allow</th>
                                    <th>Deny</th>
                                    <th style="display:none" >Informations</th>
                                    <th>Enabled</th>
                                    <th style="display:none">Opearation</th>
                                 </tr>
                             </thead>
                             <tbody>
                               {% if privileges %}
                               {% for p in privileges %}
                               <tr id="{{ p.id }}" class="even gradeC">
                                   <td>
                                     <input  name="CHKlist" type="checkbox" value="{{ p.id }}"></input>
                                   </td>
                                   <td id="id" style="word-break:break-all">{{ p.id }}</td>
                                   <td id="name" style="word-break:break-all">{{ p.name }}</td>
                                   <td id="allow" style="word-break:break-all">{{ p.allow }}</td>
                                   <td id="deny" style="word-break:break-all">{{ p.deny }}</td>
                                   <td id="informations" style="display:none;word-break:break-all">{{ p.informations }}</td>
                                   <td id="enabled" style="word-break:break-all">{{ p.enabled|lower }}</td>
                                   
                                   <td style="display:none"><button id="modify_privilege" name="modify_button" value="{{ p.id }}" type="button" class="btn btn-outline btn-success btn-xs"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit</button></td>
                               </tr>
                               {% endfor %}
                               {% endif %}
                             </tbody>
                         </table>
                     </div>
                     <!-- /.table-responsive -->
                 </div>
                 <!-- /.panel-body -->
             </div>
             <!-- /.panel -->
         </div>
         <!-- /.col-lg-12 -->
     </div>
     <!-- /.row -->
   </div>
        <!-- /#page-wrapper -->

  {% endblock %}
    {% block jquery%}
    <script type="text/javascript">
      $(document).ready(function(){
        //全选或全不选 
        $("#CHKall").click(function(){
            if(this.checked){    
                $("input[name='CHKlist']").prop("checked", true);   
            }else{    
                $("input[name='CHKlist']").prop("checked", false); 
            }    
         });  
        // end slelect all

        //data table
        $("#datatable-demo").DataTable( {
           //设置第一列为初始化排序的列
           "order": [[ 1, "desc" ]],
           //该值的含义为。初始化datatable，但对序号为0,10列的列不进行排序，别的列均可进行排序 
           "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0,7 ] }]  
           });     
        // end data table
        // add //
        $("#add_privilege").click(function(){
            $('#add_modal').modal('show')

            $("#add_commit").click(function(){
                $("#add_data").submit()
            });
            
            });
        // end add //


        // delete //
        $("#delete_privilege").click(function(){
           var ids=[];
           $('input[name="CHKlist"]:checked').each(function(){
               var id=$(this).val();
               ids.push(id);
           }); 
           if (ids.length >0)
               {
               $("#delete_data").empty()
               for (i in ids){     
                   $("#delete_data").append(
                       '<div class="form-group"><label class="control-label">ID: </label><input readonly name="id" value="'+ ids[i] +'" type="text" class="form-control"></input></div> <br>'
                       );
                   };
                 $('#delete_modal').modal('show')
               }
             else 
                {
                   $('#checkbox_error_modal').modal('show')
                }
           $("#delete_commit").click(function(){
                 $("#delete_data").submit()
             });
      });
      // end delete //
      // modify //
      $("#modify_privilege").click(function(){
          var ids=[];
          $('input[name="CHKlist"]:checked').each(function(){
              var id=$(this).val();
              ids.push(id);
          });
          var tmp_id=ids[0];
          var tmp_name=$("#"+tmp_id).find("#name").text();
          var tmp_allow=$("#"+tmp_id).find("#allow").text();
          var tmp_deny=$("#"+tmp_id).find("#deny").text();
          var tmp_enabled=$("#"+tmp_id).find("#enabled").text();
          var tmp_informations=$("#"+tmp_id).find("#informations").text();
          $('#modify_data').find('input#id').val(tmp_id);
          $('#modify_data').find('input#name').val(tmp_name);
          $('#modify_data').find('input#allow').val(tmp_allow);
          $('#modify_data').find('input#deny').val(tmp_deny);
          if (tmp_enabled == "true")
              {
              $('#modify_data').find('input#enabled').attr("checked",true);
              $('#modify_data').find('input#enabled').val(tmp_enabled);
              }
          else
              {
              $('#modify_data').find('input#enabled').attr("checked",false);
              $('#modify_data').find('input#enabled').val(tmp_enabled);
              }
          $('#modify_data').find('textarea#informations').val(tmp_informations);
          $('#modify_modal').modal('show')
          $('#modify_commit').click(function(){
              $('#modify_data').submit();
              });
      })
      // end modify //

      //show success and error modal //
      $('#success_modal').modal('show')
      $('#error_modal').modal('show')
      //  end show success and error modal //
    });  
    </script>
    {% endblock %}
